<template>
  <div class="media-module">
    <div class="media-header">
      <font-awesome-icon
          :icon="['fas', 'compact-disc']"
      /> 媒体设备
    </div>

    <div class="media-item">
      <div class="media-title">
        <i class="el-icon-microphone"></i> 音频设备
      </div>
      <div class="media-content">
        <select
            v-model="audio.deviceId"
            @change="selectAudioDevice"
            class="custom-select"
        >
          <option disabled value="">请选择音频设备</option>
          <option
              v-for="device in mediaDevices.filter(d => d.kind === 'audioinput')"
              :key="'a'+device.deviceId"
              :value="device.deviceId"
          >
            {{ device.label }}
          </option>
        </select>
      </div>
    </div>

    <div class="media-item">
      <div class="media-title">
        <i class="el-icon-video-camera"></i> 视频设备
      </div>
      <div class="media-content">
        <select
            v-model="video.deviceId"
            @change="selectVideoDevice"
            class="custom-select"
        >
          <option disabled value="">请选择视频设备</option>
          <option
              v-for="device in mediaDevices.filter(d => d.kind === 'videoinput')"
              :key="'v'+device.deviceId"
              :value="device.deviceId"
          >
            {{ device.label }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from "@/utils/log";

export default {
  name: "MediaDevice",
  props: {
    switchAudioDevice: Function,
    switchVideoDevice: Function,
  },
  data() {
    return {
      audio: {deviceId: null, label: null},
      video: {deviceId: null, label: null},
      mediaDevices: [],
    };
  },
  methods: {
    selectAudioDevice() {
      const device = this.mediaDevices.find(d => d.deviceId === this.audio.deviceId);
      this.audio.label = device ? device.label : "";
      this.switchAudioDevice(this.audio.deviceId);
      log.info("选择音频设备: " + this.audio.label);
    },
    selectVideoDevice() {
      const device = this.mediaDevices.find(d => d.deviceId === this.video.deviceId);
      this.video.label = device ? device.label : "";
      this.switchVideoDevice(device.deviceId);
      log.info("选择视频设备: " + this.video.label);
    },
  },
  mounted() {
    navigator.mediaDevices.enumerateDevices()
        .then((devices) => {
          devices.forEach((device) => {
            if (device.deviceId !== "") this.mediaDevices.push(device);
          });

          const audioDevice = this.mediaDevices.find(
              (d) => d.kind === "audioinput" && d.deviceId !== ""
          );
          if (audioDevice) {
            this.audio.deviceId = audioDevice.deviceId;
            this.audio.label = audioDevice.label;
            this.selectAudioDevice();
          } else {
            log.error("未找到音频设备");
          }

          const videoDevice = this.mediaDevices.find(
              (d) => d.kind === "videoinput" && d.deviceId !== ""
          );
          if (videoDevice) {
            this.video.deviceId = videoDevice.deviceId;
            this.video.label = videoDevice.label;
            this.selectVideoDevice();
          } else {
            log.error("未找到视频设备");
          }
        }).catch(err => {
          console.log("获取媒体设备失败: " + err);
        });
  },
};
</script>

<style scoped>
/* 响应式：跟随父级，绝不撑大 */
.media-module {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0.6rem;
  gap: 0.6rem;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.media-header {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
}

.media-item {
  margin: 0;
}

.media-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4vw;
}

.media-content {
  width: 100%;
}

.custom-select {
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.2rem auto;
  backdrop-filter: blur(8px);
  transition: background-color 0.3s;
}

.custom-select:hover,
.custom-select:focus {
  background-color: #444;
  outline: none;
}

.custom-select option {
  background-color: #444;
  color: #fff;
}
</style>